<template>
    <el-tabs v-model="activeName" class="PropStyleTabs" @tab-change="handleClick">
        <el-tab-pane label="我的文件" name="my_document">
            <el-button class="comp-tr-top" type="primary" size="small" @click="onNewFile('file')">新建文件</el-button>
            <el-button class="comp-tr-top" type="primary" size="small" @click="onNewFile('project')">新建工程</el-button>
            <el-button class="comp-tr-top" type="primary" size="small" @click="onNewFolder">创建文件夹</el-button>
            <el-row>
                <el-col v-for="i in myFileList" :key=i.uuid :span="6" :offset="index > 0 ? 2 : 0">
                    <el-card v-if="curentUserID == i.userid" :body-style="{ padding: '0px' }" @click="clickCard(i)"
                        :style="{ backgroundColor: i.backColor }">
                        <img v-bind:src=i.iconURL class="image" />
                    </el-card>

                    <div style="padding: 0px">
                        <span v-if="isEditFileNameUID != i.uuid" @click="onClickToReName(i.uuid, i.name)">{{ i.name
                            }}</span>
                        <el-input v-model="i.name" v-if="isEditFileNameUID == i.uuid" autofocus size="mini"
                            :ref="FileNameInput" @blur.stop="sureReName(i.uuid)">
                        </el-input>
                    </div>
                    <el-button class="comp-tr-top" type="primary" size="small"
                        @click="onDelete(i.uuid, i.name)">删除</el-button>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="共享空间" name="share_zone">
            <el-row>
                <el-col v-for="i in shareFileList" :key=i.uuid :span="6" :offset="index > 0 ? 2 : 0">
                    <el-card v-if="curentUserID != i.userid" :body-style="{ padding: '0px' }" @click="clickCard(i)"
                    :style="{ backgroundColor:i.backColor }">
                        <img v-bind:src=i.iconURL class="image" />
                    </el-card>
                    <div style="padding: 0px">
                        <span>{{ i.name }}</span>
                    </div>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
    <NewFileDlg ref="refNewFileDlg" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import NewFileDlg from './NewFileDlg.vue';
import { FileAccessSvc } from '../../script/manage/service/FileAccessSvc';
import {LgxCompressTool} from '../../script/canvas/common/tools/commpresstool.js'
import lgxcom from '../../script/canvas/common/common'

import { useStore } from 'vuex';
const store = useStore();

const initFileList = []
const refNewFileDlg = ref(null)
const activeName = ref("my_document")
const curentUserID = ref("")
const myFileList = ref([])
const shareFileList = ref([])

let isEditFileNameUID = ref("")
let FileList = ref(initFileList)
const currentDate = ref(new Date())
const decoder = new TextDecoder('utf-8');
const encoder = new TextEncoder('utf-8');

const clickCard = (item) => {
    console.log("clickCard");
    console.log(item.uuid);
    FileAccessSvc.open(item.uuid);
    window.gstore.commit("switchFile", item);

    let t = window.refFolderTree.value;
    if (t) {
        t.refreshData();
    }
}

const onNewFile = (type) => {
    refNewFileDlg.value.mainType = type;
    if (type == "file")
        refNewFileDlg.value.titleText = "新建文件";
    else
        refNewFileDlg.value.titleText = "新建数据工程";

    refNewFileDlg.value.visible = true;
}

const onClickToReName = (uuid, name) => {
    console.log("rename file:" + name + "   " + uuid);
    console.log(FileList.value);
    isEditFileNameUID.value = uuid;
}

const parseFiles = (fileJsonObjArray) => {
    console.log("myfile card parseFiles---------");
    FileList.value = [];
    shareFileList.value = [];
    myFileList.value = [];
    for (var i = 0; i < fileJsonObjArray.length; i++) {
        var unitObj = fileJsonObjArray[i];
        let uuid = unitObj["uuid"];
        let name = unitObj["name"];
        let parent = unitObj["parent"];
        let zipIconURL = unitObj["iconURL"];
        let maintype = unitObj["maintype"];
        let projectid = unitObj["projectid"];
        let userid = unitObj["userid"];
        let fileMode = unitObj["filetype"];
        let iconURL = zipIconURL;

        let backColor = '#ffffff';
        let extInfoStr = unitObj["extInfo"];
        if (extInfoStr && extInfoStr.length > 0){
            let extInfo = JSON.parse(extInfoStr);
            let bk = new lgxcom.LGXColor();
            bk.setColorByValue(parseInt(extInfo.backColor));
            backColor = bk.toHexString();
        }

        let errFlag = false;
        if (maintype != "subfile") {
            if (iconURL.length == 0) {
                iconURL = "/res/icon/0x030d0104.png";
            }
            else {
                try {
                    iconURL = LgxCompressTool.deCompresseBase64Str(zipIconURL);
                    console.log("zipLenth:" + zipIconURL.length + " origLenth:"+iconURL.length);
                }
                catch (error) {
                    console.log("error uuid:" + uuid+" name:"+name);
                    iconURL = zipIconURL;
                    errFlag = true;
                }
            }
            let newFile = { uuid, name, parent, iconURL, projectid, userid, fileMode ,backColor};
            FileList.value.push(newFile);

            if (userid == curentUserID.value) {
                myFileList.value.push(newFile);
            }
            else {
                shareFileList.value.push(newFile);
            }
        }
    }
}
const getAllFiles = () => {
    var url = "api/graph/getAll";
    curentUserID.value = store.state.uid;
    var postObj = { "userid": store.state.uid };
    axios.post(url, postObj).then(res => {
        console.log(res.data);
        parseFiles(res.data);
    }).catch(function (error) {
        console.log(error);
    })
}
const onNewFolder = () => {

}

const onDelete = (uuid, name) => {
    console.log("delete file:" + name + "   " + uuid);
    let fileObj = {};
    fileObj["uuid"] = uuid;
    fileObj["name"] = name;
    post2DeleteFile(fileObj);
}

const sureReName = (uuid) => {
    console.log("uuid=" + uuid);
    isEditFileNameUID.value = "";
    let dstFile = null;
    for (var i = 0; i < FileList.value.length; i++) {
        var tmp = FileList.value[i];
        if (tmp["uuid"] == uuid) {
            dstFile = tmp;
            break;
        }
    }

    if (dstFile) {
        let fileObj = {};
        fileObj["uuid"] = uuid;
        fileObj["name"] = dstFile["name"];
        fileObj["parent"] = dstFile["parent"];
        fileObj["iconURL"] = dstFile["iconURL"];
        post2UpdateFile(fileObj);
    }
    console.log(FileList.value);
}

const post2UpdateFile = function (obj) {
    var url = "api/graph/updateProfile";
    axios.post(url, obj).then(res => {
        console.log(res.data);
        getAllFiles();
    }).catch(function (error) {
        console.log(error);
    })
}

const post2DeleteFile = function (obj) {
    var url = "api/graph/delete";
    axios.post(url, obj).then(res => {
        console.log(res.data);
        getAllFiles();
    }).catch(function (error) {
        console.log(error);
    })
}


onMounted(() => {
    console.log("onMounted");
    console.log(FileList.value);
    getAllFiles();
    console.log(FileList.value);
})

defineExpose({
    getAllFiles
});
</script>

<style>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
    border-radius: 4px;
    border-bottom: 20px;
}
</style>../../script/manage/service/FileAccessSvc